<template>
    <div>
        <BasicTable @register="registerTable" size="small"
        title="仅维护钢水罐的静态属性"
        titleHelpMessage="温馨提醒"
        >
            <template #toolbar>
                <a-button preIcon="ant-design:plus-circle-outlined" type="primary"
                    v-auth="'AssetsManagement.LadleManagement.Create'" @click="openCreateLadleModal">
                    {{ t('common.createText') }}
                </a-button>
            </template>

            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'active'">
                    <Tag :color="record.active ? 'green' : 'red'">
                        {{ record.active ? t("common.enabled") : t("common.disEnabled") }}
                    </Tag>
                </template>

                <template v-if="column.key === 'action'">
                    <TableAction :actions="[
                        {
                            icon: 'clarity:note-edit-line',
                            label: t('common.editText'),
                            auth: 'AssetsManagement.LadleManagement.Update',
                            onClick: handleEdit.bind(null, record),
                        },
                        {
                            icon: 'ant-design:delete-outlined',
                            color: 'error',
                            label: t('common.delText'),
                            auth: 'AssetsManagement.LadleManagement.Delete',
                            popConfirm: {
                                title: t('common.askDelete'),
                                placement: 'left',
                                confirm: handleDelete.bind(null, record),
                            },
                        },
                    ]" />
                </template>
 
                <template v-else-if="column.key === 'material'">
                    <Tag>
                        {{ record.material == 0 ? t('routes.asset.ladle.material_highAlumina') : record.material == 1 ?
                            t("routes.asset.ladle.material_aluminumMagnesiumCarbon") : t("routes.asset.ladle.material_magnesiumCarbon") }}
                    </Tag>
                </template>

            </template>

        </BasicTable>

        <CreateLadle @register="registerCreateLadleModal" @reload="reload" :bodyStyle="{ 'padding-top': '0' }" />
        <UpdateLadle @register="registerUpdateLadleModal" @reload="reload" :bodyStyle="{ 'padding-top': '0' }" />

    </div>
</template>
    
<script lang="ts">
import { Tag } from 'ant-design-vue';
import { defineComponent } from 'vue';
import { BasicTable, TableAction, useTable } from '/@/components/Table';
import { tableColumns, searchFormSchema, getTableListAsync, deleteAsync } from '/@/views/asset/ladle/Ladle';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import CreateLadle from './CreateLadle.vue';
import UpdateLadle from './UpdateLadle.vue';

export default defineComponent({
    name: 'Ladle',
    components: {
    BasicTable,
    TableAction,
    CreateLadle,
    UpdateLadle,
    Tag,
},
    setup() {
        const { t } = useI18n();
        const [registerCreateLadleModal, { openModal: openCreateLadleModal }] = useModal();
        const [registerUpdateLadleModal, { openModal: openUpdateLadleModal }] = useModal();

        const [registerTable, { reload }] = useTable({
            columns: tableColumns,
            formConfig: {
                labelWidth: 70,
                schemas: searchFormSchema,
            },
            api: getTableListAsync,
            showTableSetting: true,
            useSearchForm: true,
            bordered: true,
            canResize: true,
            showIndexColumn: true,
            immediate: true,
            scroll: { x: true },
            actionColumn: {
                width: 220,
                title: t('common.action'),
                dataIndex: 'action',
                //  slots: { customRender: 'action' },
            },
        });

        function handleEdit(record: Recordable) {
            openUpdateLadleModal(true, {
                record: record,
            });
        }

        async function handleDelete(record: Recordable) {
            await deleteAsync({ id: record.id });
            await reload();
        }

        return {
            t,
            registerTable,
            reload,
            handleEdit,
            handleDelete,
            registerCreateLadleModal,
            registerUpdateLadleModal,
            openCreateLadleModal,
        };
    },
});
</script>
    